<!--link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"-->
<link rel="stylesheet" type="text/css" href="css/items.css">
<link rel="stylesheet" type="text/css" href="<?php //echo Yii::app()->request->baseUrl;  ?>/css/jquery.tagit.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<div id="album-info">
    <img class="user-img" src="images/profile-photo.jpg" />
    <h2><?php echo $album->ten_album; ?></h2>
    <span class="detail">Album được đăng bởi <a href="#" class="user-link"><?php echo $album->idThanhVien->ten_dang_nhap; ?></a> | <?php echo count($album->hinhs); ?> ảnh | <?php echo count($album->binhLuanAlbums); ?> bình luận | <?php echo count($album->albumLikes); ?> like</span>
    <span class="light-box">Xem bằng:&nbsp;<a href="index.php?r=site/Lightbox&id=<?php echo $album->id; ?>" class="light-box-link">Lightbox</a></span>
</div>
<div lang="en-us" class="yui3-js-enabled has-items">
    <!--link rel="stylesheet" href="css/edit_page.css" type="text/css"-->
    <div id="working-area" class="hide-focus enable-hover">                                                      
        <div id="placeholder-container">
            <div id="upload-queue" class="upload-contents">
                <div id="container" class="photos">
                    <script>												
                        var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
                    </script>
                    <?php
                    $form = $this->beginWidget('CActiveForm', array(
                        'id' => 'form',
                        'enableClientValidation' => true,
                        'clientOptions' => array(
                            'validateOnSubmit' => true,
                        ),
                            ));
                    ?>
                    <input type="hidden" name="save_c" value="1"/>
                    <input type="hidden" name="id_gallery" value="<?PHP echo $album->id; ?>"/>
                    <?PHP
                    $count = 1;
                    foreach ($image as $row) {
                        echo '<script>
												$(function(){
													$(\'#tag_' . $row['id'] . '\').tagit({
														availableTags: sampleTags,
														allowSpaces: true,
                                                                                                                fieldName: \'tag_' . $row['id'] . '\',
													});
												});
											</script>';
                        echo '<div class="photo photo-item has_thumbnail has_uploaded has_fullsize_thumbnail">
                                                <div class="selected-wrapper" id="yui_' . $row['id'] . '">
                                                    <div class="photo-thumbnail" id="yuii_' . $row['id'] . '">
                                                        <img src="server/php/files/' . $row['id'] . '.jpeg" alt="" class="thumbnail" style="-webkit-transform: rotate(0deg) scale(1); ">                                                                                                                                                                                    
                                                    </div>
                                                </div>
                                                <div class="photo-editable">
                                                    <div class="photo-title-editable">
                                                        <input type="text" name="ten_hinh_' . $row['id'] . '" value="' . $row['ten_hinh'] . '" placeholder="Add a title" title="Title" class="photo-title-field">
                                                    </div>
                                                    <div class="photo-description-editable">
                                                        <textarea name="mo_ta_hinh_' . $row['id'] . '" value="" placeholder="Ghi chú cho ảnh" title="Description" class="photo-description-field">' . $row['mo_ta'] . '</textarea>
                                                    </div>
                                                    <ul  class="grid-item-tag" id="tag_' . $row['id'] . '">';
                        $data_tag = HinhTag::model()->findAllByAttributes(array('id_hinh'=>$row['id']));
                        foreach($data_tag as $row_tag)
                        {
                            $tag = Tag::model()->findByPk($row_tag["id_tag"]);
                            echo '<li>'.$tag->ten_tag.'</li>';
                        }
                        echo'</ul>
                                                </div>
												
                                            </div>';
                        $count++;
                    }
                    ?>

                </div>                                    
            </div>                                     
        </div>    
    </div>

</div>
<div class="clear"></div>
<div class="controlbar">
    Hướng dẫn: <span style="display:inline-block;color:#888;">Nhấn Enter để kết thúc một Tag</span>
    <?php echo CHtml::submitButton('Lưu', array('class' => 'submitbutton')); ?>
    <div class="clear"></div>
</div>
<?php $this->endWidget(); ?>
<div class="clear"></div>
<style type="text/css">
    .photo-editable {padding:4px;background:white;}
    .photo-editable input, .photo-editable textarea {padding: 5px 2px;width: 211px;border: 1px solid #DDD;margin-top: 4px;}
    .photo-editable input:hover, .photo-editable textarea:hover {border:1px solid #aaa;}
    .photo-title-field {font-weight: bold;}
    .photo-description-field {font-family: arial;height:60px;}
    ul.tagit {list-style: none;margin-top:4px}
    li.tagit-choice {float: left;padding: 2px 5px;background: #CCC;margin-right:3px;margin-bottom: 4px;}
    li.tagit-new input {margin-top: 0px;}
    a.tagit-close {margin-left: 3px;width: 15px;display: inline-block;text-align: center;}
    a.tagit-close:hover {background:#eee;cursor: pointer;}
    .submitbutton {padding: 4px 35px;float:right;}
    .controlbar {padding: 10px 20px;background: white;box-shadow: 0px 0px 6px #666;}
    #album-info {
        padding: 10px 10px 3px 10px;
        margin: 15px 0px;
        margin-bottom:0px;
        background: white;
        box-shadow: 0px 0px 6px #999;
    }

    #album-info h2 {
        font-size: 22px;
    }
    .detail {}
    .user-img {
        width: 45px;
        height: 45px;
        float: left;
        margin-right: 10px;
    }
    .detail {
        color: #888;
    }
    .light-box {
        float: right;
        margin-right: 10px;
    }
    .light-box-link {
        text-decoration: none;
        color: #0063DC;
        font-size:13px;
        font-weight: bold;
    }
    .user-link {
        display: inline-block;
        text-decoration: none;
        font-size: 12px;
        margin-bottom: 9px;
        color: #0063DC;
    }

</style>
<script type="text/javascript">
    $(function () {

        var $container = $('#container');

        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '.photo'
            });
        });
    });
</script>